import { FC, useEffect, useRef } from "react";
import { useMount } from "ahooks";
import { useComponents } from "../hooks";
import {
    BoxGeometry, Mesh, MeshBasicMaterial,
    WebGLRenderer, Scene,
    PerspectiveCamera, Object3D,
    AxesHelper,
    MeshLambertMaterial,
    PointLight,
    AmbientLight,
} from 'three'
import State from 'three/examples/jsm/libs/stats.module.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
const page: FC = () => {
    const container = useRef<HTMLDivElement>(null),
        box = new BoxGeometry(1, 1, 1),
        material = new MeshLambertMaterial({
            color: (0xff0000)
        })
    let renderer: WebGLRenderer,
        orbitControls: OrbitControls,
        camera: PerspectiveCamera

    const mesh = new Mesh(box, material),
        scene = new Scene(),
        axesHelper = new AxesHelper(),
        state = new State(),
        light = new PointLight(),
        ambientLight = new AmbientLight()
    light.position.set(15, 10, 5)
    light.intensity = 120
    // light.power=160
    light.decay = 1
    scene.add(axesHelper, light, ambientLight, mesh)
    function run(t: number) {
        state.update()
        renderer.render(scene, camera);
        requestAnimationFrame(run);
    }
    useEffect(() => {
        const bodyEle = document.body
        camera = new PerspectiveCamera(100, bodyEle.clientWidth / bodyEle.clientHeight, 1, 1000)
        renderer = new WebGLRenderer()
        orbitControls = new OrbitControls(camera, renderer.domElement)
        document.body.appendChild(state.dom)
        camera.position.set(5, 5, 5)
        camera.lookAt(0, 0, 0)
        renderer.setSize(bodyEle.clientWidth * window.devicePixelRatio, bodyEle.clientHeight * window.devicePixelRatio)
        run(0)
        for (const iterator of container.current!.childNodes) {
            iterator.remove()
        }
        container.current!.appendChild(renderer.domElement)
        return () => {
            renderer.dispose()
        }
    }, [])

    return <div ref={container}></div>
}
export default page